<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter() // 获取 router 实例

// 判断是否显示底部导航栏（登录页不显示）
const showTabbar = computed(() => {
  const list = ['/loginByPassword', '/loginByPhone']
  return !list.includes(route.path)
})
const onClickLeft = () => {
  if (route.path !== '/') {
    router.go(-1)
  }
}
</script>

<template>
  <div id="app">
    <!-- 移动端适配的导航 -->
    <van-nav-bar :title="route.path === '/' ? '信息集采系统' : '信息集采系统'" :left-arrow="route.path !== '/'"
      @click-left="onClickLeft" safe-area-inset-top />

    <!-- 内容区域 -->
    <div class="content">
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <component :is="Component" v-if="route.meta.keepAlive !== false" :key="route.fullPath" />
        </keep-alive>
        <component :is="Component" v-if="route.meta.keepAlive === false" :key="route.fullPath" />
      </router-view>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-if="showTabbar" route safe-area-inset-bottom fixed class="custom-tabbar">
      <van-tabbar-item to="/" icon="home-o" class="custom-tabbar-item">
        首页
      </van-tabbar-item>
      <van-tabbar-item replace to="/org-chart" icon="apps-o" class="custom-tabbar-item">
        组织架构
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped lang="scss">
#app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* 允许内容区域收缩 */
  display: flex;
  -webkit-overflow-scrolling: touch;
}

/* 移动端优化 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 禁用文本选择 */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 优化滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 自定义底部导航栏样式 */
.custom-tabbar {
  height: 6vh;
  /* 增加导航栏高度 */
}

.custom-tabbar-item {
  font-size: 16px;
  /* 增大文字大小 */
}

.custom-tabbar-item .van-tabbar-item__icon {
  font-size: 24px;
  /* 增大图标大小 */
  margin-bottom: 4px;
  /* 调整图标与文字间距 */
}
</style>